<script setup lang="ts">
import { ref, watch } from "vue";
import InventoryDialog from "./inventoryDialog.vue";

const emits = defineEmits(["handleSearch", "addNew"]);
let searchForm = ref({
  warehouseType: "",
  warehouseName: "",
  status: ""
});
const visible = ref(false);

let handleReset = () => {
  searchForm.value = {
    warehouseType: "",
    warehouseName: "",
    status: ""
  };
  emits("handleSearch");
};


let addNewCostomer = () => {
  visible.value = true;
};

defineExpose({
  getForm: () => searchForm.value
});
</script>

<template>
  <header class="header flex-row w-full wrapper-form">
    <div class="header_left flex-1">
      <el-form class="form" :model="searchForm" inline>
        <div class="inline-flex">
          <el-form-item label="仓库名称" prop="customerCode">
            <el-input v-model="searchForm.warehouseName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="仓库类型" prop="planCode">
            <el-select v-model="searchForm.warehouseType" placeholder="请输入" clearable>
              <el-option :value="1" label="原材料" />
              <el-option :value="2" label="半成品仓" />
              <el-option :value="3" label="售后仓" />
              <el-option :value="4" label="不合格品仓" />
            </el-select>
          </el-form-item>
          <el-form-item label="仓库状态" prop="createDate">
            <el-select v-model="searchForm.status" placeholder="请输入" clearable>
              <el-option :value="1" label="启用" />
              <el-option :value="2" label="禁用" />
            </el-select>
          </el-form-item>
        </div>
        <div class="inline-flex mb-[16px]">
          <el-button type="primary" @click="emits('handleSearch')"
            >查询</el-button
          >
          <el-button @click="handleReset">重置</el-button>
        </div>
      </el-form>
    </div>
    <div class="header_right">
      <el-button @click.prevent.stop="addNewCostomer"
        ><span>+ </span>&nbsp;新增</el-button
      >
    </div>
    <InventoryDialog v-model:visible="visible" @submit="emits('addNew')" />
  </header>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;

  .header_left {
    display: flex;
    align-items: center;
    height: 100%;

    .form {
      width: 100%;
    }
  }

  .header_right {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;

    :deep(.el-button + .el-button) {
      margin-left: 0;
    }
  }
}
</style>
